<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>乐码在线智慧平台-数据统计</title>
    <link rel="shortcut icon" href="../../static/favicon.ico">
    <link href="../../static/css/bootstrap.min.css?v=3.3.6" th:href="@{/static/css/bootstrap.min.css(v='3.3.6')}"
          rel="stylesheet">
    <link href="../../static/css/font-awesome.css?v=4.4.0" th:href="@{/static/css/font-awesome.css(v='4.4.0')}"
          rel="stylesheet">
    <link href="../../static/css/plugins/bootstrap-table/bootstrap-table.min.css"
          th:href="@{/static/css/plugins/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet">
    <link href="../../static/css/animate.css" th:href="@{/static/css/animate.css}" rel="stylesheet">
    <link href="../../static/css/style.css?v=4.1.0" th:href="@{/static/css/style.css(v='4.1.0')}" rel="stylesheet">
    <style type="text/css">
        p{
            font-size: 36px;
        }
        .stuInfo{
            font-size: 16px;
        }
        h3{
            font-size: 28px;
            font-family: 新宋体;
        }
        .margin-bottom{
            margin-bottom: -10px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row col-md-12">
        <div class="text-center">
            <br><br><br>
            <p>萍乡学院学生数据统计表</p>
        </div>
        <div class="stuInfo text-center">
            学号：&nbsp;110&nbsp;&nbsp;&nbsp;&nbsp;姓名：&nbsp;张三&nbsp;&nbsp;&nbsp;&nbsp;院系：&nbsp;萍乡学院
            <a href="" id="importBtn" name="importBtn" class="btn btn-info col-md-offset-11" style="font-size: 16px" data-toggle="modal" data-target="#importModal">导出PDF</a>
        </div>
        <h3 class="page-header margin-bottom">专业统计</h3>
        <table id="table1" class="table table-bordered table-striped statistical">

        </table>

        <br>
        <h3 class="page-header margin-bottom">学习进度</h3>
        <table id="table2" class="table table-striped table-bordered table-hover progress">

        </table>

        <br>
        <div id='canvasDiv'></div><!-- 统计图存放位置  -->
        <h3 class="page-header margin-bottom">教师评语</h3>

    </div>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="importModal">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">导出</h4>
            </div>
            <div class="modal-body">
                <p style="font-size: 15px">是否导出该学生的个人学习数据？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">确认导出</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- 全局js -->
<script src="../../static/js/jquery.min.js?v=2.1.4" th:href="@{/static/js/jquery.min.js('v=2.1.4')}"></script>
<script src="../../static/js/bootstrap.min.js?v=3.3.6" th:href="@{/static/js/bootstrap.min.js('v=3.3.6')}"></script>

<!-- 自定义js -->
<script src="../../static/js/content.js?v=1.0.0" th:href="@{/static/js/content.js(v='1.0.0')}"></script>
<!-- Bootstrap table -->
<script src="../../static/js/plugins/bootstrap-table/bootstrap-table.min.js" th:href="@{/static/js/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
<script src="../../static/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js" th:href="@{/static/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js}"></script>
<script src="../../static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js" th:href="@{/static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<!-- jquery-watermark -->
<script src="../../static/js/plugins/jquery-watermark/jquery.watermark.js" th:href="@{/static/js/plugins/jquery-watermark/jquery.watermark.js}"></script>

<script>

    $(function () {
        //初始化第一个bootstrapTable
        $('#table1').bootstrapTable({
            url: '../../static/js/demo/analysis/datatable1.json',        // 表格数据来源
            toolbar : '#toolbar', // 工具按钮用哪个容器
            method:'get',
            cache:false,
            sortable : true, //是否启用排序
            sortOrder : "asc", // 排序方式
            uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
            columns: [{
                field: 'id',
                title: '序号'
            }, {
                field: 'class',
                title: '所在班级'
            }, {
                field: 'major',
                title: '所属专业'
            },{
                field: 'scheme',
                title: '培养方案'
            }, {
                field: 'start_time',
                title: '开始时间'
            },{
                field: 'end_time',
                title: '结束时间'
            }],
        });


        //初始化第二个bootstrapTable
        $('#table2').bootstrapTable({
            url: '../../static/js/demo/analysis/datatable2.json',        // 表格数据来源
            toolbar : '#toolbar', // 工具按钮用哪个容器
            method:'get',
            cache:false,
            sortable : true, //是否启用排序
            sortOrder : "asc", // 排序方式
            server:"client",
            pageNumber: 1,
            uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
            onLoadSuccess: function(){
                console.log("加载完成！");
                var data = $("#table2").bootstrapTable('getData',true);
                mergeCells(data,"training","training",$("#table2"));
            },
            columns: [{
                field:'training',
                title:'培养方案'
            },{
                field: 'id',
                title: '序号'
            }, {
                field: 'name',
                title: '课程名称'
            }, {
                field: 'studyPro',
                title: '学习进度'
            },{
                field: 'homeworkPro',
                title: '作业进度'
            }, {
                field: 'notes',
                title: '笔记数'
            },{
                field: 'sign',
                title: '签到数'
            },{
                field: 'question',
                title: '提问数'
            },{
                field: 'answer',
                title: '回答数'
            }],
        });


        /**
         * 合并单元格
         * @param data  原始数据（在服务端完成排序）
         * @param fieldName 合并属性名称
         * @param fieldName2 指定行方向可能的合并字段名称
         * @param target    目标表格对象
         * 以下方法可实现动态行与列的同时合并
         */
        function mergeCells(data,fieldName,fieldName2,target){
            //声明一个map计算相同属性值在data对象   列方向上出现的次数和
            var rowsSortMap = {};
            for(var i = 0 ; i < data.length ; i++){
                for(var prop in data[i]){
                    if(prop == fieldName){
                        var key = data[i][prop]
                        if(rowsSortMap.hasOwnProperty(key)){
                            rowsSortMap[key] = rowsSortMap[key] * 1 + 1;
                        } else {
                            rowsSortMap[key] = 1;
                        }
                        break;
                    }
                }
            }
            //声明一个map计算相同属性值在data对象  行方向上出现的次数和,行方向上我这里指定了另外一列 也可以向不指定从而全部进行查看
            var colsSortMap = {};
            for(var i = 0 ; i < data.length ; i++){
                for(var prop in data[i]){
                    if(prop == fieldName){
                        for(var pp in data[i] ){
                            if(pp == fieldName2){
                                var key1 = data[i][prop];
                                var key2 = data[i][pp];
                                if(key1 == key2){
                                    colsSortMap[key1] = 2;
                                }else{
                                    colsSortMap[key1] = 1;
                                }
                                break;
                            }
                        }
                    }
                }
            };

            for(var prop in rowsSortMap){
                console.log(prop,rowsSortMap[prop])
            }
            for(var prop in colsSortMap){
                console.log(prop,colsSortMap[prop])
            }
           /* $(target).bootstrapTable('mergeCells',{index:0, field:fieldName, colspan: count, rowspan: 1});*/

            //寻找对应字段具体值相对应的 rowsSortMap  colsSortMap 值，以防止出现乱合并的现象
            for(var i = 0 ; i < data.length ; i++){
                for(var prop in data[i]){
                    if(prop == fieldName){
                        var key = data[i][prop]
                        var rows;
                        var cols;
                        for(var abc in rowsSortMap){
                            if(abc==key){
                                rows = rowsSortMap[abc] * 1;
                            }
                        }
                        for(var bcd in colsSortMap){
                            if(bcd==key){
                                cols = colsSortMap[bcd] * 1;
                            }
                        }
                        $(target).bootstrapTable('mergeCells',{index:i, field:fieldName, colspan: 1, rowspan: rows});
                        i += rows - 1;
                        break;
                    }
                }
            }
        };
    });

    /*  初始化jquery-watermark  */
    $("body").watermark({
        texts : ["乐码智慧平台", "学生数据统计表", "苏州快程乐码信息技术有限公司"], //水印文字
        textColor : "#d2d2d2", //文字颜色
        textFont : '14px 微软雅黑', //字体
        width : 100, //水印文字的水平间距
        height : 100,  //水印文字的高度间距（低于文字高度会被替代）
        textRotate : -30 //-90到0， 负数值，不包含-90
    })
</script>
</body>
</html>